<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Muse Popup Demo</title>
    <link rel="stylesheet" href="dist/muses.min.css">
</head>
<body>
<button onclick="info()">信息框</button>
<button onclick="tip()">提示</button>
<button onclick="ask()">询问框</button>
<button onclick="bottom_ask()">底部对话框</button>
<button onclick="bottom_tip()">底部提示</button>
<button onclick="self_def()">自定义标题风格</button>
<button onclick="page()">页面层</button>
<button onclick="loading()">loading层</button>
<button onclick="loading_content()">loading带文字</button>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="dist/muses.min.js"></script>
<script type="text/javascript">
    function info() {
        muses.open({
            content : '移动版和PC版不能同时存在同一页面',
            show: function() {
                console.log('show func before build...');
            },
            shown: function() {
                console.log('now muses modal shown.');
            }
        });
    }

    function tip() {
        muses.open({
            content: 'hello layer',
            type: 'message',
            time: 20 //2秒后自动关闭
        });
    }

    function ask() {
        // 询问框
        muses.open({
            content: '您确定要刷新一下本页面吗？',
            backdrop: false,
            ok: function (index) {
                console.log('刷新了页面...');
            }
        });
    }

    function bottom_ask() {
        //底部对话框
        muses.open({
            content: '这是一个底部弹出的询问提示',
            ok: function (index) {
                console.log('刷新了页面...');
            }
        });
    }

    function bottom_tip() {
        muses.open({
            content: '一个没有任何按钮的底部提示'
        });
    }

    function self_def() {
        muses.open({
            title: '我是标题',
            content: '标题风格任你定义。',
            backdrop: false,
            ok: function (index) {
                console.log('刷新了页面...');
            }
        });
    }

    function page() {
        muses.open({
            type: 'page',
            content: '可传入任何内容，支持html。一般用于手机页面中',
            style: 'position:fixed; bottom:0; left:0; width: 100%; height: 200px; padding:10px 0; border:none;'
        });
    }

    function loading() {
        muses.open({type: 'load'});
    }

    function loading_content() {
        muses.open({
            type: 'load',
            content: '加载中'
        });
    }
</script>
</html>
